<!--团组织下拉选择-->
<template>
    <a-tree-select
        v-bind="$attrs"
        v-on="$listeners"
        style="width: 100%"
        :value="value"
        :tree-data="treeData"
        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
        :tree-checkable="treeCheckable"
        :replaceFields="treeReplace"
        :show-checked-strategy="showCheckedStrategyStaff"
        @treeExpand="handleTreeExpand"
        @select="handleSelect"
        @change="handleChange"
        placeholder="请选择"
        :showSearch="showSearch"
        treeNodeFilterProp="title"
    />

</template>

<script>
  import Bus from '@/tool/Bus.js'
  import { TreeSelect } from 'ant-design-vue';
  import { queryTreeList } from '@/api/partyMasses/leagueManage'
  const SHOW_ALL = TreeSelect.SHOW_ALL; //显示所有选中节点(包括父节点).
  const SHOW_PARENT = TreeSelect.SHOW_PARENT; //只显示父节点(当父节点下所有子节点都选中时)
  const SHOW_CHILD = TreeSelect.SHOW_CHILD; //默认只显示子节点.
  export default {
    name:'a'+ Date.now(),
    // name: 'YouthTreeSelect',
    props:{
      value: {
        type: [String, Array],
        default: ''
      },
      /**
       * @description: 定义选中项回填的方式
       * @param {} SHOW_ALL  显示所有选中节点(包括父节点).
       * @param {} SHOW_PARENT  只显示父节点(当父节点下所有子节点都选中时)
       * @param {} SHOW_CHILD  默认只显示子节点
       */
      showCheckedStrategyStaff:{
        default: SHOW_CHILD
      },
      treeCheckable: { // 是否有复选框
        type: Boolean,
        default: false
      },
      // 是否在接口请求到数据后返回选中的node值
      returnInitNode: {
        type: Boolean,
        default: false
      },
      // orgType不在数组里，则不能选择；该参数不传时，默认不做限制
      onlySelectTypes: {
        type: [Array],
        default: null
      },
      // 是否可搜索
      showSearch: {
        type: Boolean,
        default: true
      }
    },
    data(){
      return {
        treeData: [],
        treeReplace:{
          title: 'youthOrgName',
          value:'id',
          key:'id',
        },
      }
    },
    created() {
      this.queryTreeList()
    },
    methods: {
      /**
       * 处理树数据
       */
      resolveTreeData(rootData) {
      const loop = (list) => {
          if(!list) return
          list.forEach(item => {
            if(this.onlySelectTypes && !this.onlySelectTypes.includes(item.orgType)) {
              item.disabled = true
            }
            loop(item.children)
          })
        }
        loop(rootData)
        return rootData
      },
      /**
       * 获取当前选中的node值
       */
      getSelectData() {
        try {
          const loop = (list) => {
          if(!list) return
          list.forEach(item => {
            if(item[this.treeReplace.value] === this.value) {
              this.$emit('selectNode', { ...item })
              throw new Error('break')
            }
            loop(item.children)
          })
        }
        loop(this.treeData)
        } catch {}
      },
      queryTreeList(){
          let params = {}
          this.treeData =[]
          queryTreeList().then(res => {
            if(res.code === '0'){
              this.treeData = this.resolveTreeData(res.data)
              this.returnInitNode && this.getSelectData()
            }
          }).catch(err => {
          })
      },
      /**
       * @description: 展开节点时调用
       * @param {object} expandedKeys 展开节点时的对象
       */
      handleTreeExpand(expandedKeys){
        this.$emit('update:expandedKeys', expandedKeys)
        // this.$emit('handleExpanded', expandedKeys)
      },
      /**
       * @description: 被选中时调用
       * @param {string} value 被选中时调用的id字符串
       */
      handleSelect(value, node, extra){
        console.log(value)
        console.log(this.value)
        this.$emit('update:selectValue', value)
        this.$emit('selectNode', { ...node.dataRef })
        // this.$emit('handleSelect', value)
      },
      /**
       * @description: 选中树节点时调用此函数
       * @param {object} value  选中树节点的id
       * @param {object} label  选择树节点的文本信息对象
       */
      handleChange(value, label, extra){
        this.$emit('update:selectedValue', value)
        this.$emit('update:selectedLabel', label)
        this.$emit('selectChange', { ...extra.triggerNode.dataRef })
      },

    }
  }
</script>
